<template>
  <div>
    <div v-if="videoList.length > 0" class="video_container">
      <div class="video_wrap">
        <div class="item_wrap" v-for="(item, index) in videoList.slice(0,5)" :key="index">
          <div class="item">
            <div @click="toDetail(item.vid, item.type)" class="cover">
              <el-image lazy :src="item.coverUrl" fit="cover"></el-image>
              <span class="count"
                ><span class="iconfont el-icon-caret-right"></span>
                {{
                  item.playTime > 10000
                    ? Math.floor(item.playTime / 10000) + "万"
                    : item.playTime
                }}</span
              >
              <span class="time">{{
                item.durationms ? item.durationms : "" | timerFormat
              }}</span>
            </div>
            <div class="title">{{ item.title }}</div>
            <div class="name">{{ item.creator[0].userName }}</div>
          </div>
        </div>
      </div>
    </div>
    <div v-else>
      <el-empty description="暂无视频"></el-empty>
    </div>
  </div>
</template>

<script>
import { getSearchList } from "@/util/findMusic.js";
export default {
  name: "SearchVideo",
  data() {
    return {
      count: 0,
      videoList: [],
    };
  },
  created() {
    this.getSearchList(1);
  },
  methods: {
    async getSearchList(page) {
      // console.log(page);
      let {
        data: { result },
      } = await getSearchList(
        this.$route.params.keyword,
        24,
        (page - 1) * 24,
        1014
      );
      this.videoInfo = result;
      if (result) {
        this.videoList = result.videos;
      }
    },
    toDetail(id, type) {
      if (type == 0) {
        this.$router.push("/mvDetail/" + id);
      } else {
        this.$router.push("/videoDetail/" + id);
      }
      this.$store.dispatch("musicPlay/saveIsPlaying", "false");

    },
  },
};
</script>
<style scoped lang='less'>
.video_container {
  //   padding: 1rem 4.25rem;
  .video_wrap {
    display: grid;
    justify-content: space-around;
    grid-template-columns: repeat(auto-fill, 18.25rem);

    .item_wrap {
      //   width: 11.25rem;
      .item {
        margin-bottom: 30px;
        .cover {
          position: relative;
          height: 10rem;
          .el-image {
            width: 100%;
            height: 100%;
            border-radius: 13px;
            box-shadow: 0 2px 4px rgba(0, 0, 0, 0.12),
              0 0 6px rgba(0, 0, 0, 0.04);
          }
          .count {
            position: absolute;
            font-size: 8px;
            z-index: 5;
            top: 2%;
            right: 2%;
            color: #fff;
          }
          .el-icon-caret-right {
            font-size: 15px;
          }
          .time {
            position: absolute;
            font-size: 8px;
            z-index: 5;
            bottom: 2%;
            right: 2%;
            color: #fff;
          }
        }
        .title {
          font-size: 15px;
          font-weight: 600;
          line-height: 20px;
          overflow: hidden;
          white-space: nowrap;
          text-overflow: ellipsis;
        }
        .name {
          font-size: 10px;
          color: #6e6e69;
        }
      }
    }
  }
}
</style>